<template>
  <div v-loading="loading" class="gl_contentBox gl_heightFull">

    <el-tabs v-model="activeTab" class="gl_tabs" type="card">
      <el-tab-pane label="基础信息" name="0">
        <personal-info ref="refPersonalInfo" :is-check="!($route.query.edit)" :is-default-check="!($route.query.edit)" :user-data="createRegisterInput" :is-show-tag="true" />
      </el-tab-pane>
      <el-tab-pane label="会员信息" name="1">
        <!-- 中跆协会员 -->
        <modMemberInfo ref="refModMemberInfo" :is-check="!($route.query.edit)" :dict="dictRoot.dict" :user-data="createRegisterInput" :hide-title="true" :hide-style="true" class="gl_mb_20" />
      </el-tab-pane>
      <el-tab-pane label="段位信息" name="2">
        <!-- 中跆协级位段位 -->
        <modTkwChiDan ref="refModTkwChiDan" :is-check="!($route.query.edit)" :dict="dictRoot" :user-data="createRegisterInput" :hide-style="true" />

        <!-- 国际台协段位 -->
        <modTkwIntDan ref="refModTkwIntDan" :is-check="!($route.query.edit)" :dict="dictRoot" :user-data="createRegisterInput" :hide-style="true" />
      </el-tab-pane>
      <el-tab-pane label="培训考试纪录" name="3">
        <!-- 培训考试纪录 -->
        <records />
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-row>
        <el-col :span="24" align="center">
          <el-button size="mini" @click="close">返回</el-button>
          <el-button v-if="($route.query.edit)" size="mini" type="primary" :loading="submitLoading" @click="submit">{{ $t('button.submit') }}</el-button>

        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import { CopyData } from '@/lib';
import {
  api_GET_EventsManagementRegisterId,
  api_PUT_EventsManagementRegisterIdWithTags
} from '@/extend/api/gameswaggerApi/app';
import {
  SiSTKWEventsManagementCreateRegisterWithTagsInput
} from '@/lib/form/game/swaggerForm';
import { mapState, mapActions } from 'vuex';
import personalInfo from '@/components/PersonalInfo';
import modMemberInfo from '@/views/home/train/components/modMemberInfo';
import modTkwChiDan from '@/views/home/train/components/modTkwChiDan';
import modTkwIntDan from '@/views/home/train/components/modTkwIntDan';
import records from './records.vue';
export default {
  components: {
    personalInfo,
    modMemberInfo,
    modTkwChiDan,
    modTkwIntDan,
    records
  },
  data() {
    return {
      submitLoading: false,
      activeTab: '0',
      createRegisterInput: new SiSTKWEventsManagementCreateRegisterWithTagsInput(),
      loading: false,
      flag: false
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType,
      dictRoot: state => state.dict,
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  created() {
    this.getDict();
    this.getDictByType(['district']);
    this.getInfo();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    getInfo() {
      this.loading = true;
      api_GET_EventsManagementRegisterId(this.$route.query.id, { IncludeTags: true }).then(res => {
        this.loading = false;
        this.createRegisterInput = res;
        this.createRegisterInput.registerTags = this.createRegisterInput.registerTags.map(item => item.registerTagTypeCode);
      }, error => {
        this.loading = false;
        this.$message({ type: 'error', message: '获取个人信息失败！' + (error.error && error.error.message || '') });
      });
    },
    close() {
      this.$router.go(-1);
    },
    submit() {
      this.$refs.refPersonalInfo.getInsideUserData().then(res => {
        this.getFormsData(res);
        // this.addMember(res);
      });
    },
    // 获取各个表单数据
    getFormsData (vo) {
      const _all = [
        this.$refs.refModMemberInfo.getInsideUserData(),
        this.$refs.refModTkwChiDan.getInsideUserData(),
        this.$refs.refModTkwIntDan.getInsideUserData()
      ];
      console.log(_all);
      Promise.all(_all)
        .then(
          res => {
            this.mergeFormDataToVO(res, vo);
            // editMemberCode: '' // add、edit、check

            this.updateMemberInfo(vo);
          }
        )
        .catch(
          error => {
            console.log('error: ', error);
            this.$message({
              message: `请先完善必填信息`,
              type: 'warning',
              showClose: true
            });
            if (error.component === 'memberInfo') {
              this.activeTab = '1';
            }
            if (error.component === 'tkwIntDan' || error.component === 'tkwChiDan') {
              this.activeTab = '2';
            }
          }
        );
    },
    // 将数据合并到VO
    mergeFormDataToVO (list, vo) {
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        CopyData(item, vo);
      }
    },
    // 更新个人信息
    updateMemberInfo(data) {
      this.submitLoading = true;
      // 将空字符串转为Null, 部分后端类型不支持null. 所以移除为空字段
      const vo = JSON.parse(JSON.stringify(data));
      for (const k in vo) {
        const ktem = vo[k];
        if (ktem === '' || ktem === null) {
          // vo[k] = null;
          delete vo[k];
        }
      }
      api_PUT_EventsManagementRegisterIdWithTags(this.$route.query.id, vo).then(() => {
        this.submitLoading = false;
        this.$message({ type: 'success', message: '编辑成功' });
      }, error => {
        this.submitLoading = false;
        this.$message({ type: 'error', message: (error.error && error.error.message) });
      });
    }
  }
};
</script>

<style>

</style>
